import React from 'react';
import { Row, Col } from 'choerodon-ui';
import style from './index.less';

const renderCol = () => {
  const list = [1, 2, 3, 4];
  return list.map((key) => {
    return <Col className={style.col} span={4} key={key}>col-4</Col>;
  });

};
const GridFlex: React.FC = () => {
  return (
    <div>
      <p>sub-element align left</p>
      <Row className={style.row} type="flex" justify="start">
        {renderCol()}
      </Row>

      <p>sub-element align center</p>
      <Row className={style.row} type="flex" justify="center">
        {renderCol()}
      </Row>

      <p>sub-element align right</p>
      <Row className={style.row} type="flex" justify="end">
        {renderCol()}
      </Row>

      <p>sub-element monospaced arrangement</p>
      <Row className={style.row} type="flex" justify="space-between">
        {renderCol()}
      </Row>

      <p>sub-element align full</p>
      <Row className={style.row} type="flex" justify="space-around">
        {renderCol()}
      </Row>
    </div>
  );
};

export default GridFlex;